<!-- 锁屏 -->
<template>
  <q-dialog
    v-model="visible"
    persistent
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card
      :dark="ui.isDark"
      class="row justify-evenly items-center content-center"
    >
      <!-- logo -->
      <q-card-section class="row justify-center q-pa-none">
        <q-img
          :src="ui.isDark ? ui.logoInWhite : ui.logoInBlack"
          :width="$q.screen.gt.sm ? '20vw' : '14rem'"
          @click="offLock"
        ></q-img>
      </q-card-section>

      <!-- 时间 -->
      <q-card-section
        class="column justify-center items-center q-pa-none q-mt-xl"
        :class="ui.isDark ? 'text-white' : 'text-dark'"
      >
        <div
          class="text-bold text-center"
          :style="$q.screen.gt.sm ? 'font-size:6vw;' : 'font-size:5rem;'"
        >
          {{ date }}
        </div>
        <div
          class="text-bold text-center"
          :style="$q.screen.gt.sm ? 'font-size:3vw;' : 'font-size:2rem;'"
        >
          {{ time }}
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, onBeforeMount, onUnmounted } from "vue";
import { useUiStore } from "stores/ui";
import { useQuasar } from "quasar";
import { clickFive } from "src/utils/tools";
import { useI18n } from "vue-i18n"; // 连点

const t = useI18n().t;
const locale = useI18n().locale;
const lang = "indexPage.deviceLock.";
const $q = useQuasar();
const ui = useUiStore();
const date = ref(""); // 时间
const time = ref(""); // 年份
const visible = ref(false); // dialog弹窗状态
defineExpose({ visible });

let dateTimer; // 定时器ID

onBeforeMount(() => {
  // 获取时间设置定时器
  renew();
});
onUnmounted(() => {
  // 清除定时器
  clearTimeout(dateTimer);
});

// 关闭dialog弹窗
function offLock() {
  visible.value = !clickFive(new Date().getTime());
}

// 更新时间
function renew() {
  dateTime();
  dateTimer = setTimeout(() => {
    renew();
  }, 800);
}
// 获取日期与时间
function dateTime() {
  const arr = [
    t(lang + "星期日"),
    t(lang + "星期一"),
    t(lang + "星期二"),
    t(lang + "星期三"),
    t(lang + "星期四"),
    t(lang + "星期五"),
    t(lang + "星期六"),
  ];
  const year = new Date().getFullYear();
  const month = new Date().getMonth() + 1;
  const dates = new Date().getDate();
  const day = new Date().getDay();
  const h = new Date().getHours().toString().padStart(2, "0");
  const m = new Date().getMinutes().toString().padStart(2, "0");
  date.value = h + ":" + m;
  time.value =
    locale.value === "zh-CN"
      ? year +
        t(lang + "年") +
        month +
        t(lang + "月") +
        dates +
        t(lang + "日") +
        arr[day]
      : year + " - " + month + " - " + dates + " " + arr[day];
}
</script>

<style scoped></style>
